<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="企业主入驻" width="40%" top="5vh">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <TitleLine title="基本信息" />
        <el-form-item label="公司名称" prop="enterpriseName">
          <el-input
            v-model="formData.enterpriseName"
            placeholder="请输入公司名称"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="营业执照号" prop="licenseNo">
          <el-input
            v-model="formData.licenseNo"
            placeholder="请输入营业执照号"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="主营业务" prop="businessScope">
          <el-input
            v-model="formData.businessScope"
            placeholder="请输入主营业务"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="touchName">
          <el-input
            v-model="formData.touchName"
            placeholder="请输入联系人"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="touchMobile">
          <el-input
            :maxlength="11"
            v-model="formData.touchMobile"
            placeholder="请输入联系电话"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="联系地址">
          <AreaMultipleSelect ref="areaMultipleSelect" type="update" v-model="formData.address" />
        </el-form-item>
        <el-form-item label="" prop="detailAddress">
          <el-input
            v-model="formData.detailAddress"
            placeholder="请输入详细地址"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>

        <!-- 营业执照 -->
        <div>
          <TitleLine title="营业执照（点击可查看大图）" />
          <UploadImage
            :isShowTip="true"
            :lazy="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="60*60"
            :file-size="1"
            v-model="formData.licenseImg"
          />
        </div>

        <div class="pt-5">
          <TitleLine>
            <div>
              <span style="color: #f56c6c; margin-right: 4px">*</span>
              <span>驳回理由</span>
            </div>
          </TitleLine>
        </div>

        <div class="mt-20">
          <el-radio v-model="auditType" :label="1">通过</el-radio>
          <el-radio v-model="auditType" :label="0">驳回</el-radio>
        </div>

        <el-form-item prop="reason" class="mt-20" v-if="!auditType" label-width="0">
          <el-input
            v-model.trim="formData.reason"
            type="textarea"
            placeholder="请输入驳回理由"
            show-word-limit
            :maxlength="100"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="flex justify-center">
        <el-button v-if="auditType" type="primary" @click="handelConfirm">审核通过</el-button>
        <el-button v-else type="info" @click="handleReject">审核驳回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 待审核列表资料审核弹窗
 * @param {Boolean} value v-model双向绑定控制弹窗显示
 */
import _ from 'lodash'
export default {
  name: 'CompanyAuditDiaLog',
  components: {},
  props: {
    // 控制是否显示
    value: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      // 企业主id
      eptId: '',
      // 审核状态
      auditType: 1,
      // 表单内容
      formData: {
        // 用户ID
        userId: '',
        // 企业名称
        enterpriseName: '',
        // 营业执照号
        licenseNo: '',
        // 	业务范围
        businessScope: '',
        // 联系人
        touchName: '',
        // 联系电话
        touchMobile: '',
        // 地址对象
        address: {
          provinceObj: {
            name: '',
            id: ''
          },
          cityObj: {
            name: '',
            id: ''
          },
          countyObj: {
            name: '',
            id: ''
          }
        },
        // 详细地址
        detailAddress: '',
        // 营业执照
        licenseImg: [],
        // 审核理由
        reason: ''
      },
      // 地址
      address: {},
      rules: {
        enterpriseName: [
          {
            required: true,
            message: '请输入公司名称',
            trigger: 'blur'
          }
        ],
        licenseNo: [
          {
            required: true,
            message: '请输入营业执照号码',
            trigger: 'blur'
          },
          {
            min: 13,
            message: '营业执照号码长度不能少于13位',
            trigger: 'blur'
          },
          {
            pattern: /^[A-Za-z0-9]+$/g,
            message: '只能包含字母或数字',
            trigger: 'blur'
          }
        ],
        businessScope: [
          {
            required: true,
            message: '请输入主营业务',
            trigger: 'blur'
          }
        ],
        touchName: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'blur'
          }
        ],
        touchMobile: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        detailAddress: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ],
        reason: [
          {
            required: true,
            message: '请输入驳回理由',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    // 是否显示对话框
    dialogVisible: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 获取企业主信息
    async getCompanyInfo(id) {
      if (!id) return
      try {
        const { data } = await this.$http.user.company.getInfo(id)
        // 数据处理
        for (let key in this.relevancyUser) {
          this.relevancyUser[key] = data[key]
        }
        // 地址信息
        this.formData.address.provinceObj = {
          name: data.provinceName,
          id: data.provinceId + ''
        }
        this.formData.address.cityObj = {
          name: data.cityName,
          id: data.cityId + ''
        }
        this.formData.address.countyObj = {
          name: data.districtName,
          id: data.districtId + ''
        }
        // 地址组件回显
        this.$refs.areaMultipleSelect.showBackData({
          provinceObj: this.formData.address.provinceObj,
          cityObj: this.formData.address.cityObj
        })
        // 其余表单数据
        for (let key in this.formData) {
          if (key === 'licenseImg') {
            this.formData[key] = JSON.parse(data[key])[0]
          } else if (key !== 'address') {
            this.formData[key] = data[key]
          }
        }
      } catch (error) {
        console.log('getCompanyInfo', error)
      }
    },

    // 关闭对话框
    onClose() {
      this.$refs['elForm'].resetFields()
    },

    // 审核驳回
    handleReject: _.debounce(function () {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // 发送请求
        this.$http.user.company
          .editVerifyStatus({
            etpId: this.eptId,
            reason: this.formData.reason,
            verifystatus: 2
          })
          .then(res => {
            if (res.status === 200) {
              this.$message.success('操作成功')
              this.dialogVisible = false
              this.$refs.elForm.resetFields()
              this.$emit('refreshList')
            }
          })
          .catch(err => {
            console.log('handleReject', err)
          })
      })
    }, 400),

    // 审核通过
    handelConfirm: _.debounce(function () {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // 参数整理
        const params = this.$lodash.cloneDeep(this.formData)
        params.id = this.eptId
        params.provinceName = params.address.provinceObj.name
        params.provinceId = params.address.provinceObj.id
        params.cityName = params.address.cityObj.name
        params.cityId = params.address.cityObj.id
        params.districtName = params.address.countyObj.name
        params.districtId = params.address.countyObj.id
        params.licenseImg = [params.licenseImg]
        params.verifyStatus = 3
        this.$http.user.company
          .approved(params)
          .then(res => {
            if (res.status === 200) {
              this.$message.success('操作成功')
              this.dialogVisible = false
              this.$refs.elForm.resetFields()
              this.$emit('refreshList')
            }
          })
          .catch(err => {
            console.log('handleReject', err)
          })
      })
    }, 400)
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>
